/**
 * mobileplus 平台自动生成
 */
define(['require', './BaseView','../models/StoreCollection'], function (require, BaseView, StoreViewCollection) {
    return BaseView.extend({

        events: {
            'click .list-item': '_listItemClick'
        },
        type:'LetterScroll',
        c:new StoreViewCollection,

        //initialize
        initialize: function(options) {
            this.listenTo(this.c, 'reset', this.createLeftList)
        },
        render: function() {
            BaseView.prototype.render.apply(this,arguments);
            var listBox = `<div class="list-box">
                                <dl class="member-list"></dl>
                            </div>`;
            this.$el.html(listBox);
            this.$listBox = this.$el.find('.list-box');
            this.$memberList = this.$el.find('.member-list');
            this.createRightList();
            this.createLeftList(this.c);

            return this;
        },

        _listItemClick: function(e) {
            e.preventDefault();
            Backbone.history.navigate("#DailyDetail", {
                trigger:true
            });
        },

        //创建左边的列表数据
        createLeftList: function(collect){
            var list = collect.models;
            var len = collect.length;
            var listItemDom = '<dt>日志提交人员</dt>';
            for (var i = 0; i < len; i++) {
                var key = list[i].get('index');
                var avatar = list[i].get('avatar');
                var real_name = list[i].get('real_name');
                var j_count = list[i].get('j_count');
                var id = list[i].get('member_id')
                listItemDom += `<dd data-key="${key}" data-id="${id}">
                                    <div class="img-box">
                                        <img src="${avatar}" alt="测试图片">
                                    </div>
                                    <div class="detail">
                                        <h3>${real_name}</h3>
                                        <div>
                                            提交 <span class="number">${j_count}</span>份日志
                                        </div>
                                    </div>
                                </dd>`;

            }
            this.$memberList.html(listItemDom);
        },

        //创建左边的字母列表(方法针对的是)
        createRightList:function() {
            //(方法针对的是所有有的字母显示)
            var rightULList = [
                    '<ul class="letter-scroll hide">',
                    '<li class="letter-left-item">A','</li>','<li class="letter-left-item">B','</li>',
                    '<li class="letter-left-item">C','</li>','<li class="letter-left-item">D','</li>',
                    '<li class="letter-left-item">E','</li>','<li class="letter-left-item">F','</li>',
                    '<li class="letter-left-item">G','</li>','<li class="letter-left-item">H','</li>',
                    '<li class="letter-left-item">I','</li>','<li class="letter-left-item">J','</li>',
                    '<li class="letter-left-item">K','</li>','<li class="letter-left-item">L','</li>',
                    '<li class="letter-left-item">M','</li>','<li class="letter-left-item">N','</li>',
                    '<li class="letter-left-item">O','</li>','<li class="letter-left-item">P','</li>',
                    '<li class="letter-left-item">Q','</li>','<li class="letter-left-item">R','</li>',
                    '<li class="letter-left-item">S','</li>','<li class="letter-left-item">T','</li>',
                    '<li class="letter-left-item">U','</li>','<li class="letter-left-item">V','</li>',
                    '<li class="letter-left-item">W','</li>','<li class="letter-left-item">X','</li>',
                    '<li class="letter-left-item">Y','</li>','<li class="letter-left-item">Z','</li>',
                    '<li class="letter-left-item">#','</li>',
                    '</ul>'
                ].join(''),
                $rightULList = $(rightULList);
                this.$rightList = $rightULList;
                this.$listBox.append($rightULList);
                var $rightUl = this.$el.find('.letter-scroll');
                var _this = this;
                var numArray = ['top','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','K', 'L', 'M', 'N', 'O', 'P','Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'default'];

                $rightUl.on('click', 'li', function (e) {
                    var scrollElement = _this.$el.closest('.main')[0];
                    var key = $(e.target).text();
                    var clientHeight = scrollElement.clientHeight;
                    var itemHeight = $(scrollElement).find('dd:first').height();
                    var dtHeight = $(scrollElement).find('dt').height();
                    var index = $(scrollElement).find('[data-key="'+ key +'"]').first().index();
                    var prevHeight = $(scrollElement).children().eq(0).height() + $(scrollElement).children().eq(1).height();
                    var scrollTop = (dtHeight + (index-1) *itemHeight) + prevHeight;
                    $(scrollElement).animate({
                        scrollTop:scrollTop
                    }, 100);
                })
        }
    });
});
